<template>
	<view class="content" v-if="show">
		<!-- <topLogo></topLogo> -->
		<view class="wrap">
			<view class="newsshow">
				<view class="title">
					{{article.title}}
				</view>
				<view class="newsxia">
					<view class="sandian">
						<view class="hongse" v-if="articleId==55">
							{{article.remark}}
						</view>
						<view class="time-div" v-else>
							{{article.postTime}}
							<view class="" v-if="article.columnId==9||article.columnId==10">
								积分取得<text class="red">{{time}}</text>
							</view>

						</view>
						<!-- <view class="diancon" @click="dianzan">
							<uni-icons type="hand-up" size="30" :color="article.source==1?'#0e70cc':'' "></uni-icons>
							{{article.praiseNum}}
						</view> -->
					</view>
				</view>
				<view class="showcon" v-html="formatRichText(article.content)">

				</view>
			</view>
			<view class="btncss" :class="article.params.isSign==1?'no':''" v-if="article.author==1"
				@click="article.params.isSign==0?$public.navto('sign',{articleId:articleId}):''">
				{{article.params.isSign==1?'已报名':'报名参加'}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				article: {},
				articleId: 0,
				show: false,
				time: 60,
				setTime: null
			};
		},
		onShow() {
			if (!this.$public.isLoginUrl())
				return false;
			this.getArticleDetail()
		},
		onLoad(options) {
			this.articleId = options.articleId;

		},
		methods: {
			getArticleDetail() {
				let that = this
				this.$public.htmlPost("/api/getArticleDetail", {
					articleId: that.articleId
				}).then((res) => {
					console.log("getArticleDetail res", res)
					let data = res.data;
					if (data.code == 0) {
						that.article = data.data
						that.show = true

						if (that.article.columnId == 9 || that.article.columnId == 10) {
							that.time = 60
							that.setTime = setInterval(() => {
								if (that.time - 1 == 0) {
									clearInterval(that.setTime);
									that.addAnswer({
										title: "文章停留60秒",
										articleId: that.article.articleId
									}, that.article.subTitle)
								} else {
									console.log("that.time", that.time)
									that.time--;
								}
							}, 1000);
						}
					}
				})
			},
			addAnswer(daduijson, jfNum) {
				let that = this
				this.$public.htmlPost("/api/addAnswer", {
					json: JSON.stringify(daduijson),
					jfNum: jfNum ? jfNum : 20
				}).then(res => {
					if (res.data.code == 0) {
						uni.showModal({
							title: "温馨提示！",
							content: `恭喜你已停留60秒，奖励你${jfNum}积分，可免费兑换礼品哦！`,
							cancelText: "返回列表",
							confirmText: "去兑换",
							success: function(res) {
								if (res.confirm) {
									// console.log('用户点击确定');
									that.$public.redirectTo("/pages/mall/index")
								} else if (res.cancel) {
									// console.log('用户点击取消');
									that.$public.navBack()
								}
							}
						})
					} else {
						that.$api.msg(res.data.msg)
					}
				})
			},
			dianzan() {
				let that = this
				this.$public.htmlPost("/api/addUserChoose", {
					linkId: that.articleId,
					lxId: 2,
					typeId: 0
				}).then((res) => {
					if (that.article.source == 1) {
						that.article.source = ""
						that.article.praiseNum--
					} else {
						that.article.source = "1"
						that.article.praiseNum++
					}
				})
			},
			formatRichText(html) { // 富文本内容格式化
				return html && html.replace(/<img[^>]*>/gi, function(match, capture) { // 查找所有的 img 元素
					return match.replace(/style=".*"/gi, '').replace(/style='.*'/gi,
						'') // 删除找到的所有 img 元素中的 style 属性
				}).replace(/\<img/gi, '<img style="width:100%;"') // 对 img 元素增加 style 属性，并设置宽度为 100%
			}
		},
		destroyed() {
			// console.log(111)
			clearInterval(this.setTime);
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #fff;

		.wrap {
			padding: $uni-wrap-padding;
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 50rpx;
			font-size: 34rpx;

		}

		.hongse {

			font-size: 28rpx;

			color: #DF686A;
			text-align: center;
			width: 100%;
		}

		.sandian {
			padding: 40rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.diancon {
				display: flex;
				align-items: center;

				.image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 5rpx;
				}

				.uni-icons {
					margin-right: 5rpx;
				}
			}
		}

		.time-div {
			display: flex;
			justify-content: space-between;
			width: 100%;

			.red {
				color: #DF686A;
			}
		}

		// .showcon {
		// 	img {
		// 		width: 100%;
		// 	}
		// }
		.btncss {
			position: fixed;
			bottom: 15rpx;
			width: 690rpx;
			left: 30rpx;

			&.no {
				background: #eaeaea;
			}
		}
	}
</style>